<template>
  <div ref="appWrapperRef" :class="['app-wrapper', classes]">
    <div
      v-show="app.isMobile && app.sidebar.opened && app.isVertical"
      class="app-mask"
      @click="app.toggleSideBar()"
    />
    <Sidebar v-show="app.isVerticalBar && !hideTap" />
    <div :class="['main-container', hideTap ? 'main-hidden' : '']">
      <div v-if="app.getFixedHeader">
        <component :is="header" />
        <!-- 主体内容 -->
        <lc-main :fixed-header="app.getFixedHeader" />
      </div>
      <el-scrollbar v-else>
        <el-backtop
          title="回到顶部"
          target=".main-container .el-scrollbar__wrap"
        >
          <backTop />
        </el-backtop>
        <component :is="header" />
        <Tags />
        <!-- 主体内容 -->
        <lc-main :fixed-header="app.getFixedHeader" />
      </el-scrollbar>
    </div>
    <!-- 系统设置 -->
    <Setting />
  </div>
</template>
<script setup lang="ts">
import { computed } from "vue";
import LcMain from "./component/main/main.vue";
import { useAppHooks } from "@/core/pinia/store/app.store";
import Vertical from "./component/header/vertical.vue";
import Tags from "./component/tag/index.vue";
import Horizontal from "./component/header/horizontal.vue";
import Setting from "./component/setting/setting.vue";
import Sidebar from "./component/sidebar/sidebar.vue";
const app = useAppHooks();
const header = computed(() => {
  return app.isVerticalBar ? Vertical : Horizontal;
});
const hideTap = computed(() => {
  return app.getHiddenTabs;
});
const classes = computed(() => {
  return {
    hideSidebar: !app.getSidebar?.opened,
    openSidebar: app.getSidebar?.opened,
    withoutAnimation: app.getSidebar?.withoutAnimation,
    mobile: app.isMobile
  };
});
</script>

<style lang="scss" scoped>
.app-wrapper {
  position: relative;
  width: 100%;
  height: 100%;

  &::after {
    display: table;
    clear: both;
    content: "";
  }

  &.mobile.openSidebar {
    position: fixed;
    top: 0;
  }
}

.app-mask {
  position: absolute;
  top: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.3;
}

.re-screen {
  margin-top: 12px;
}
</style>
